$comwidth: 340rpx;
.m-top {
    display: flex;
    position: relative;
    color: whitesmoke;
    padding:30rpx;

    .su-img {
        width: 180rpx;
        height: 180rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    .su-name {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 28rpx;
        margin-top:14rpx;
    }
    .su-cpwrite{
        font-size: 22rpx;
        color: gray;
        margin-top:5rpx;
    }
    .bg-img {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: 200%;
        background-position: center;
        filter: blur(60Px);
        z-index: -1;
    }
}

.m-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10rpx;
    padding: 10rpx;
    background-color: white;
    .m-cont {
        display: inline-block;
        font-size: 24rpx;
        margin-bottom: 40rpx;
        .m-item {
            background-size: cover;
            height: $comwidth;
            width: $comwidth;
            margin: auto;
            border-radius: 10rpx;
            position: relative;
            color: white;
            .iconfont {
                font-size: 32rpx;
            }
            .m-playcount,
            .m-username {
                position: absolute;
                background-color: #0000004a;
            }
            .m-playcount {
                top: 5rpx;
                right: 5rpx;
            }
            .m-username {
                bottom: 5rpx;
                left: 5rpx;
            }
        }
        .m-name {
            width: $comwidth;
            margin: auto;
            margin-top: 10rpx;
        }
    }
}